<template>
  <el-dialog v-model="visible" title="挂号科室附加费">
    <vxe-table ref="tableRef" height="400" :data="data">
      <vxe-column type="seq" width="70"></vxe-column>
      <vxe-column field="deptName" title="科室名称" width="200"></vxe-column>
      <vxe-column field="itemCode" title="项目代码" width="140"></vxe-column>
      <vxe-column field="itemName" title="项目名称" width="200"></vxe-column>
      <vxe-column field="price" title="金额" width="100"></vxe-column>
      <vxe-column title="操作" width="140" fixed="right">
        <template #default="{ row }">
          <el-button size="small" type="danger" @click="removeItem(row)">删除</el-button>
        </template>
      </vxe-column>
    </vxe-table>
    <template #footer>
      <div class="flex flex-row flex-justify-between">
        <div>
          <el-button @click="appendRow">新增</el-button>
          <el-button @click="save">保存</el-button>
        </div>
        <div>
          <el-button @click="refresh">刷新</el-button>
          <el-button @click="visible = false">退出</el-button>
        </div>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import type { VxeTableInstance } from 'vxe-table'
import { ref, watch } from 'vue'
import { ElMessageBox, ElMessage } from 'element-plus'
import type { OutpDeptAppendPrice } from '@/api/register/base'
import { DictAPIs, EnumDictName } from '@/api/system/dict'
const tableRef = ref<VxeTableInstance<OutpDeptAppendPrice>>()
const data = ref<OutpDeptAppendPrice[]>([])
const visible = ref(false)

watch(visible, val => {
  if (val) {
    refresh()
  }
})

/**是否显示 */
function display() {
  visible.value = true
}

/**刷新 */
async function refresh() {
  data.value = await DictAPIs.getData(EnumDictName.科室附加费)
}

/**新增项目 */
function appendRow() {
  const $table = tableRef.value
  if ($table) {
    $table.insert({})
  }
}

/**保存 */
function save() {
  ElMessageBox.confirm('proxy will permanently delete the file. Continue?', 'Warning', {
    confirmButtonText: 'OK',
    cancelButtonText: 'Cancel',
    type: 'warning',
  })
    .then(() => {
      ElMessage({
        type: 'success',
        message: 'Delete completed',
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: 'Delete canceled',
      })
    })
}

/**删除项目 */
function removeItem(row: OutpDeptAppendPrice) {
  const $table = tableRef.value
  if ($table) {
    $table.remove(row)
  }
}

defineExpose({ display })
</script>

<style lang="scss"></style>
